<template>
  <div class="app-container">

    <el-form :model="createU" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
<!--      <div v-if="errorInfo" style="margin-bottom: 5px;">-->
<!--        <span>{{errInfo}}</span>-->
<!--      </div>-->
      <el-form-item prop="id">
        <el-input prefix-icon="el-icon-user" v-model="createU.id" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input prefix-icon="el-icon-lock" :type="showPassword" placeholder="密码" v-model="createU.pwd">
          <i slot="suffix" class="el-input__icon el-icon-view" @click="showPwd()"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="nextPwd">
        <el-input prefix-icon="el-icon-lock" :type="showPassword" placeholder="确认密码" v-model="createU.nextPwd">
          <i slot="suffix" class="el-input__icon el-icon-view" @click="showPwd()"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="roleId">
        <el-select v-model="createU.roleId" placeholder="请选择角色">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="login-btn">
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </div>
    </el-form>

  </div>
</template>

<script>
    export default {
        name: "manager",
        data(){
            return{
                createU: {
                    userName: '',
                    pwd: '',
                    nextPwd: '',
                    roleId: 0,
                },
                rules: {
                    id: [
                        {required: true, message: '请输入登录名', trigger: 'blur'}
                    ],
                    roleId: [
                        {required: true, message: '请选择角色', trigger: 'blur'}
                    ],
                    pwd: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    nextPwd: [
                        {required: true, message: '请确认密码', trigger: 'blur'}
                    ]
                },
            }
        },
        methods:{

            createM(ruleForm){
                if(this.createU.pwd === this.create.nextPwd){
                    const self = this
                    self.$refs.ruleForm.validate((valid) => {
                        if(! valid){
                            self.$axios.post('/manage/login/createM',self.createU).then(res => {
                                if(res.data.code === 0){
                                    self.$message.info('创建成功！')
                                }else {
                                    self.$message.error(res.data.code + '  ' + res.data.msg)
                                }
                            })
                        }
                    })
                }else {
                    this.$message.error("两次输入的密码不正确，请重新输入")
                    this.createU.pwd = null
                    this.createU.nextPwd = null
                }
            }

        }
    }
</script>

<style scoped>

</style>
